<template>
  <div class="main-container" id="content">
    <div class="main-content">
      <div class="top-content">
        <div class="top-name">{{ typeName }}记录</div>
        <el-button class="pad-back" @click="back()">返回</el-button>
      </div>
      <div class="bottom-content">
        <div class="bottom-box">
          <!-- 选择盒子样式 -->
          <div class="search-box">
            <el-form
              :inline="true"
              ref="searchForm"
              :model="searchForm"
              class="demo-form-inline"
            >
              <el-form-item label="审批状态">
                <div class="my-el-select">
                  <el-select
                    v-model="searchForm.approveStatus"
                    @change="onSubmit"
                    :popper-append-to-body="false"
                    placeholder="请选择"
                  >
                    <el-option label="未审批" value="0"></el-option>
                    <el-option label="已审批" value="1"></el-option>
                  </el-select>
                </div>
              </el-form-item>
              <el-form-item label="时间">
                <div class="my-el-select">
                  <el-date-picker
                    v-model="date"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd"
                    @change="handleDate"
                    clearable
                    :editable="false"
                  >
                  </el-date-picker>
                </div>
              </el-form-item>
              <el-form-item>
                <div class="my-el-search">
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="onSubmit"
                    >搜索</el-button
                  >
                  <el-button @click="resetForm">重置</el-button>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <!-- 列表渲染 -->
          <div class="list">
            <NxTablePad
              :table-cols="tableCols"
              :table-data="tableData"
              :pag-ination="pagination"
              :isIndex="true"
              class="table-wrap"
              @refresh="refresh"
              :height="'47rem'"
            >
              <template slot="approveStatus" slot-scope="scope">
                <span v-if="scope.row.approveStatus == 0">未审批</span>
                <span v-if="scope.row.approveStatus == 1">已审批</span>
              </template>
              <template slot="operation" slot-scope="scope">
                <el-button
                  type="warning"
                  class="pad-btn"
                  @click="handleDetail(scope.row)"
                  >详 情</el-button
                >
                <el-button
                  type="success"
                  class="pad-btn"
                  :disabled="scope.row.approveStatus == 1"
                  @click="handleApproval(scope.row)"
                  >审 批</el-button
                >
              </template>
            </NxTablePad>
          </div>
        </div>
      </div>
    </div>
    <TransferRecordDetail
      :detailId="detailId"
      :detailStatus="detailStatus"
      :detailIsDialog="detailIsDialog"
      :infosData="infosData"
    ></TransferRecordDetail>
  </div>
</template>
<script>
import NxTablePad from '@/components/NxTablePad.vue'
import { Page } from '@/utils/pagination'
import TransferRecordDetail from './components/transferRecordDetail.vue'
import {
  getStockInOrderPadList,
  getStockInOrderDetailPad,
  approveStockInOrderPad,
} from '@/api/godown'
export default {
  components: {
    NxTablePad,
    TransferRecordDetail,
  },
  data() {
    return {
      // 查询字段
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        type: 0,
        typeName: '',
        approveStatus: '',
        companyId: '',
        baseId: '',
        startDate: '',
        endDate: '',
        code: '',
      },
      // 表格字段
      tableCols: [
        {
          label: '入库单号',
          prop: 'code',
          align: 'center',
        },
        {
          label: '出入库类型',
          prop: 'typeName',
          align: 'center',
          width: '110',
        },
        {
          label: '供应商编码',
          prop: 'cvenCode',
          align: 'center',
          width: '90',
        },
        {
          label: '审批状态',
          slot: 'approveStatus',
          align: 'center',
        },
        {
          label: '装鱼日期',
          prop: 'workInDate',
          align: 'center',
        },
        {
          label: '卸鱼日期',
          prop: 'workOutDate',
          align: 'center',
        },
        {
          label: '单兵',
          prop: 'workInUser',
          align: 'center',
        },
        {
          label: '到达地',
          prop: 'addressArrival',
          align: 'center',
        },
        {
          label: '车辆',
          prop: 'carNumber',
          align: 'center',
        },
        {
          label: '司机',
          prop: 'carUser',
          align: 'center',
        },
        {
          label: '备注',
          prop: 'remark',
          align: 'center',
        },
        {
          label: '操作',
          slot: 'operation',
          align: 'center',
          width: '200',
          fixed: 'right',
        },
      ],
      tableData: [],
      date: [], // 日期范围
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
      pagination: new Page(),
      detailId: '', //详情rowid
      detailStatus: 'deatail',
      detailIsDialog: false, //详情审核页面状态
      typeName: '',
      infosData: [], // 转移记录详情
      userType: '', // 用户类型（0超级管理员，1公司管理员，2公司员工）
    }
  },
  mounted() {
    // 初始化加载
    this.userType = Number(window.localStorage.getItem('userType'))
    this.searchForm.userType = this.userType
    this.searchForm.companyId = this.$route.query.companyId
    this.searchForm.baseId = this.$route.query.baseId
    this.searchForm.type = this.$route.query.type
    this.typeName = this.$route.query.typeName
    if (this.searchForm.type != 2) {
      this.searchForm.typeName = this.typeName
    }

    this.getList()
  },
  methods: {
    // 返回
    back() {
      this.$router.go(-1)
    },
    // 查询
    onSubmit() {
      this.pagination.pageNum = 1
      this.getList()
    },

    // 分页查询
    refresh(val) {
      this.searchForm.pageNum = val.pageNum
      this.searchForm.pageSize = val.pageSize
      this.getList()
    },
    // 查询列表
    getList() {
      getStockInOrderPadList(this.searchForm).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.data
          this.pagination.count = res.data.total
        }
      })
    },
    // 详情
    handleDetail(row) {
      this.detailId = row.id + ''
      this.detailStatus = 'see'
      this.detailIsDialog = true
    },
    //审批
    handleApproval(row) {
      this.$confirm('正在对该入库记录进行审批是否通过?', '提示', {
        confirmButtonText: '通过',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          approveStockInOrderPad({ id: row.id }).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: res.msg,
              })
              this.getList()
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
    // 重置表单
    resetForm() {
      this.searchForm = {
        pageNum: 1,
        pageSize: 10,
        type: 0,
        typeName: '',
        approveStatus: '',
        companyId: '',
        baseId: '',
        startDate: '',
        endDate: '',
        code: '',
      }
      this.date = []
      this.searchForm.companyId = this.$route.query.companyId
      this.searchForm.baseId = this.$route.query.baseId
      this.searchForm.type = this.$route.query.type
      this.typeName = this.$route.query.typeName
      if (this.searchForm.type != 2) {
        this.searchForm.typeName = this.typeName
      }

      this.onSubmit()
    },
    // 日期切换
    handleDate() {
      if (this.date && this.date.length == 2) {
        this.searchForm.startDate = this.date[0]
        this.searchForm.endDate = this.date[1]
      } else {
        this.searchForm.startDate = ''
        this.searchForm.endDate = ''
      }

      this.onSubmit()
    },
    // 关闭详情 审批状态
    closedeatailCheck() {
      this.deatailCheckIsDialog = false
    },
    // 关闭详情
    closeAddEdit() {
      this.detailIsDialog = false
    },
  },
}
</script>
<style lang="less" scoped>
/*滚动条整体样式*/
::-webkit-scrollbar {
  width: 0.59rem;
  height: 8.93rem;
}

/*滚动条里面小方块*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #d9d9d9;
}

/*滚动条里面轨道*/
::-webkit-scrollbar-track {
  border-radius: 10px;
  background: #ededed;
}

* {
  box-sizing: content-box;
}

.main-container {
  background-color: #045cad;
  padding: 1rem 0 1.5rem 0;
  .main-content {
    min-height: calc(100vh - 90px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .top-content {
      width: 97%;
      height: 5rem;
      // margin-top: 1rem;
      margin-bottom: 0.5rem;
      color: #ffffff;
      display: flex;
      justify-content: center;
      font-family: '宋体';
      position: relative;
      // border: 1px solid red;
      position: relative;

      .top-name {
        font-size: 2.59rem;
        font-weight: 900;
      }
      .el-icon-full-screen {
        line-height: 3rem;
        margin-left: 5rem;
      }
    }

    .bottom-content {
      width: 97%;
      display: flex;
      justify-content: center;
      height: 63.57rem;
      background: #ffffff;
      border-radius: 0.43rem;
      .bottom-box {
        width: 97%;
        // display: flex;
        // position: relative;
        // 分页按钮适配
        /deep/.btn-prev {
          min-width: 3.642857rem;
          height: 3.642857rem;
          font-size: 3.357143rem;
        }
        /deep/.btn-next {
          min-width: 3.642857rem;
          height: 3.642857rem;
          font-size: 3.357143rem;
        }
        /deep/.el-pagination.is-background .el-pager li {
          min-width: 3.642857rem;
          height: 3.642857rem;
          font-size: 2.357143rem;
          line-height: 4rem;
        }
        /deep/.el-pagination .btn-prev .el-icon {
          font-size: 3.357143rem;
        }
        /deep/.el-pagination .btn-next .el-icon,
        .el-pagination .btn-prev .el-icon {
          font-size: 3.357143rem;
        }
        /deep/.el-pagination__total {
          font-size: 1.928571rem;
          line-height: 4rem;
        }
      }
      .search-box {
        width: 100%;
        display: flex;
        // justify-content: space-around;
        margin-top: 3rem;
        margin-bottom: 1rem;

        // 调整label的大小
        /deep/.el-form-item__label {
          font-size: 2.2rem;
          // display: flex;
          line-height: 4rem;
          font-weight: bold;
          align-items: center;
          font-family: '微软雅黑';
          // font-weight: bold;
          color: #4f5a64;
          padding-right: 2rem;
          padding-top: 0.2rem;
          margin-left: 2rem;
        }
      }
    }
  }
}

// 调整button的宽高
.my-el-search {
  .el-button {
    // margin-left: 4rem;
    text-align: center;
    width: 10rem;
    height: 2.6rem;
    font-size: 2rem;
  }
}

// 调整select的宽高
.my-el-select {
  margin-right: 5rem;
  /* selecte 框的高度设置，默认是 40px*/
  /deep/ .el-input__inner {
    height: 4.5rem;
    width: 25rem;
    font-size: 1.86rem;
    padding-left: 2rem;
  }

  /* 下面设置右侧按钮居中 */
  .el-input__suffix {
    top: 5px;
  }

  //    icon样式设置
  /deep/.el-input__icon {
    font-size: 0;
  }

  .el-input__suffix-inner {
    display: inline-block;
  }
  /deep/.el-date-editor .el-range-separator {
    margin: 0 1rem;
    line-height: 4.285714rem;
    font-size: 1.86rem;
    width: 10%;
  }
  /deep/.el-range-editor.el-input__inner {
    padding: 0;
  }
  /deep/.el-date-editor .el-range-input {
    width: 100%;
    font-size: 1.86rem;
  }
  ::v-deep .el-select-dropdown__item {
    font-size: 2.16rem;
    height: 4.428571rem;
    line-height: 4.428571rem;
  }
  ::v-deep.el-input--small .el-input__inner {
    height: 4rem;
    width: 10rem !important;
    font-size: 1.3rem;
    text-align: center;
    padding: 0;
  }
}
</style>
